<template>
    <div style="width:100%;height:100%;">
        <div class="login_box">
            <el-form :model="logininfo" :rules="rules" ref="loginform">
                <el-form-item label-width="0px" prop="userName">
                    <el-input
                        v-model="logininfo.userName"
                        placeholder="请输入账号"
                        clearabl="clearabl"
                        prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <el-form-item label-width="0px" prop="password">
                    <el-input
                        v-model="logininfo.password"
                        placeholder="请输入密码"
                        clearable="clearable"
                        type="password"
                        prefix-icon="iconfont icon-lock"></el-input>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-button type="primary" style="width:100%;" @click="login('loginform')">登录</el-button>
                </el-form-item>
                <el-form-item
                    label=""
                    label-width="0px"
                    :label-position="labelPosition"
                    style="margin-bottom:0px;">
                    <div style="position:relative;float:left;">
                        <i
                            @click="github_login"
                            class="iconfont icon-github-fill-copy"
                            style="font-size:30px;"></i>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

import api from '@/config/server.js'
import qs from 'qs'
export default {
  data () {
    return {
      labelPosition: 'left',
      logininfo: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login (loginform) {
      console.log('true')
      this.$refs[loginform].validate((valid) => {
        if (valid) {
          this.$axios.get(api.login + '?' + qs.stringify(this.logininfo)).then(({data}) => {
            console.log(data)
            this.$router.push('/main')
          })
        } else {
          return false
        }
      })
    },
    github_login () {
      window.location = api.github_auth
    }
  }
}
</script>
<style lang="scss" scoped>
  $background-color: #efefef;
  .login_box{
      width: 300px;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -100px;
      border-radius: 7px 7px 7px 7px;
      background-color: #efefef;
      padding: 15px 15px 15px 15px;
  }
</style>
